<template>
  <view>
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
	  <div class="authentication-page">
		  <u-sticky bgColor="none">
			  <div class="authentication-top">
				  <div class="top-item " :class="{'choose':curIndex == 1}" @click="changeIndex(1)">认证企业</div>
				  <div class="top-item" :class="{'choose':curIndex == 2}" @click="changeIndex(2)">关联企业</div>
			  </div>
		  </u-sticky>
		  <div class="ps-div">交易前，请先认证您的公司信息或关联已认证的公司</div>
		  <div class="con-list" v-if="curIndex == 1">
			  <div class="list-item" v-for="item in list">
				  <div class="item-state">认证成功</div>
				  <div class="item-top" @click="select(item)">
					  <div class="item-name">{{item.companyName}}</div>
					  <div class="item-code">{{item.licenseCode}}</div>
					  <div class="item-time">
						  <img src="https://pic.moresu.com/FvRHG8lTvR-fQsAY7hMspuG2Th-4" style="width:20rpx;height:20rpx;display: inline-block;vertical-align: middle;"/>
						  <span style="padding-left:10rpx;vertical-align: middle;">申请时间：{{item.createdAt}}</span>
					  </div>
				  </div>
				  <div class="item-bottom">
					  <u-button text="入驻开店" type="primary" shape="circle" :plain="true" :customStyle="{'margin-right':'20rpx','width':'188rpx','height':'54rpx'}" v-if="item.btnType == 1" @click="toBusinessCheckIn(item.companyId)"></u-button>
					  <u-button text="查看店铺" type="primary" shape="circle" :plain="true" :customStyle="{'margin-right':'20rpx','width':'188rpx','height':'54rpx'}" v-if="item.btnType ==2 && item.store_id" @click="toShop(item.store_id)"></u-button>
					  <u-button text="查看详情" type="primary" shape="circle" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)" :customStyle="{'width':'188rpx','height':'54rpx'}" @click="toPerfectAuthenticationInfo(item.companyId)"></u-button>
				  </div>
			  </div>
		  </div> 
		  <div class="con-list" v-if="curIndex == 2">
			  <div class="list-item" v-for="item in list">
				  <div v-if="!isSelect">
					  <div class="item-state gl-state" :class="{'ching' : item.checkState == 0}">{{item.checkState == 0 ? '待审核' : item.checkState == 1 ? '关联成功' : '--'}}</div>
					  <div class="item-top">
						  <div class="item-name">{{item.companyName}}</div>
						  <div class="item-code">{{item.licenseCode}}</div>
						  <div class="item-time">
							  <img src="https://pic.moresu.com/FvRHG8lTvR-fQsAY7hMspuG2Th-4" style="width:20rpx;height:20rpx;display: inline-block;vertical-align: middle;"/>
							  <span style="padding-left:10rpx;vertical-align: middle;">关联时间：{{item.createdAt}}</span>
						  </div>
					  </div>
					  <div class="item-bottom">
						  <u-button  type="primary" shape="circle" :plain="true" :customStyle="{'width':'100%','height':'60rpx'}" v-if="item.checkState == 1" @click="setGl(item.relationId,3)">
							  <img src="https://pic.moresu.com/FpRoV2RaCMfmnzw847kUUeSmJdzX" style="width:26rpx;height:24rpx;"/><span style="padding-left:10rpx" >解除关联</span>
						  </u-button>
						  <u-button text="取消申请" type="primary" shape="circle" :plain="true" :customStyle="{'width':'100%','height':'60rpx'}" v-if="item.checkState == 0" @click="setGl(item.relationId,4)"></u-button>
					  </div>
				  </div>
				  
				  <div v-else-if="isSelect && item.checkState == 1">
					  <div class="item-state gl-state" :class="{'ching' : item.checkState == 0}">{{item.checkState == 0 ? '待审核' : item.checkState == 1 ? '关联成功' : '--'}}</div>
					  <div class="item-top" @click="select(item)">
						  <div class="item-name">{{item.companyName}}</div>
						  <div class="item-code">{{item.licenseCode}}</div>
						  <div class="item-time">
							  <img src="https://pic.moresu.com/FvRHG8lTvR-fQsAY7hMspuG2Th-4" style="width:20rpx;height:20rpx;display: inline-block;vertical-align: middle;"/>
							  <span style="padding-left:10rpx;vertical-align: middle;">关联时间：{{item.createdAt}}</span>
						  </div>
					  </div>
					  <div class="item-bottom">
						  <u-button  type="primary" shape="circle" :plain="true" :customStyle="{'width':'100%','height':'60rpx'}" v-if="item.checkState == 1" @click="setGl(item.relationId,3)">
							  <img src="https://pic.moresu.com/FkL52P0XRo2SfQCDAQaPEzDFp1uW" style="width:26rpx;height:24rpx;"/><span style="padding-left:10rpx" >解除关联</span>
						  </u-button>
						  <u-button text="取消申请" type="primary" shape="circle" :plain="true" :customStyle="{'width':'100%','height':'60rpx'}" v-if="item.checkState == 0" @click="setGl(item.relationId,4)"></u-button>
					  </div>
				  </div>
				  
			  </div>
		  </div> 
	      <div class="page-bottom-btn" style="left:0;padding:24rpx">
			  <u-button text="添加认证" type="primary" @click="toAddAuth" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)" v-if="curIndex == 1"></u-button>
			  <u-button text="关联认证企业" type="primary" @click="toGlCompany" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)" v-if="curIndex == 2"></u-button>
		  </div>  
	  </div>
  </view> 
</template>
<script>
  import {
    getMyCompanyList
  } from '@/config/api2.js'
  import { setGlCompany } from '@/config/api.js'

  export default {
    data() {
      return {
        list: [],
        isSelect: false,
        companyId: '',
		status: 'loadmore',
		pageNum: 0,
		pageSize:10,
		count:0,
		curIndex:1
      }
    },
    onShow() {
      let self = this;
      uni.getStorage({
        key: 'delCompany',
        success: (e) => {
          //换成接口获取
          self.getList()
          uni.removeStorage({
            key: 'delCompany'
          })
        }
      })
      uni.getStorage({
        key: 'editAddCompany',
        success: (e) => {
          //换成接口获取
          self.getList()
          uni.removeStorage({
            key: 'editAddCompany'
          })
        }
      })
	  uni.getStorage({
	    key: 'addGl',
	    success: (e) => {
	      //换成接口获取
	      self.getList()
	      uni.removeStorage({
	        key: 'addGl'
	      })
	    }
	  })
    },
    onLoad(e) {
      if (e.type == 'select') {
        this.isSelect = true;
      }
	  this.curIndex = 1
	  this.clearData();
      this.getList()
    },
    methods: {
		setGl(relationId,type){
			let text = type == 3 ? '确定解除关联吗？' : '确定取消关联申请吗？'
			uni.showModal({
			  title: '提示',
			  content:text,
			  success: (res) => {
			    if (res.confirm) {
			      setGlCompany({
			        relationId: relationId,
					setType:type
			      }).then(() => {
			       this.clearData()
			       this.getList()
			      })
					  
			    } else if (res.cancel) {
			      console.log('用户点击取消');
			    }
			  }
			});
		},
		//去认证公司详情页
		toPerfectAuthenticationInfo(id){
			uni.navigateTo({
			  url: '/pagesUser/user/perfectAuthenticationInfo?companyId='+id
			})
		},
		//去申请开店页
		toBusinessCheckIn(companyId){
			uni.navigateTo({
			  url: '/pagesUser/business/businessCheckIn?companyId=' + companyId
			})
		},
		//去店铺详情页
		toShop(id){
			uni.navigateTo({
			  url: '/pagesUser/business/businessPage?storeId='+id
			})
		},
		
		//去申请认证页
		toAddAuth(){
			uni.navigateTo({
			  url: '/pagesUser/user/myAuthenticationInfo'
			})
		},
		
		toGlCompany(){
			uni.navigateTo({
			  url: '/pagesUser/user/glCompany'
			})
		},
		changeIndex(index){
			this.curIndex = index
			this.clearData();
			this.getList()
		},
		//清除数据
		clearData(){
			this.pageNum = 1;
			this.list = [];
			this.status = 'loadmore';
			this.count = 0;
		},
		
      select(row) {
        //是否需要返回地址(从订单确认页跳过来选收货地址)
        // if (!this.isSelect) {
        //   uni.navigateTo({
        //     url: `perfectAuthenticationInfo?companyId=${ row.companyId}&isNeedInvoiceInfo=${row.isNeedInvoiceInfo}`
        //   })
        //   return;
        // }
        if(this.isSelect){
			uni.setStorage({
			  key: 'selectAuth',
			  data: row,
			  success() {
			    uni.navigateBack();
			  }
			})
		}
       
      },
     
      getList() {
        getMyCompanyList({type:this.curIndex}).then(res => {
          this.list = res
        })
      },
	  
      isDefaultChange(e) {
        this.isDefault = e.detail.value;
      },
    }
  }
</script>

<style lang="scss">
 @import '@/style/common.scss';
 .authentication-page{
	 padding:24rpx;
	 padding-bottom:150rpx;
	 .authentication-top{
		 background: rgba(255,255,255,1);
		 box-shadow: 0px 0px 10rpx rgba(0,17,52,0.09);
		 border-radius: 18rpx;
		 @include flexbox(space-around,center);
		 height:82rpx;
		 .top-item{
			 font-size: 30rpx;
			 height:82rpx;
			 line-height: 82rpx;
			 color: #000;
			 position: relative;
		 }
		 .top-item.choose{
			 color:#FF5E01 ;
			 font-weight: bold;
			
		 }
		 .top-item.choose::after{
			 content: " ";
			 position: absolute;
			 bottom:0;
			 width:38rpx;
			 height:8rpx;
			 background: linear-gradient(90deg, #FF5E01 0%, #FF5E01 100%);
			 border-radius: 5px;
			 overflow: hidden;
			 left:50%;
			 margin-left:-19rpx;
		 }
	 }
	.ps-div{
		background: rgba(254,247,227,1);
		border-radius: 6px;
		font-size: 22rpx;
		color: #FF6339;
		padding:12rpx 50rpx;
		margin-top:20rpx;
	}
	.con-list{
		padding-top:28rpx;
		.list-item{
			background: rgba(255,255,255,1);
			border-radius: 18rpx;
			padding:0 24rpx;
			position: relative;
			margin-bottom:32rpx;
			.item-top{
				padding:30rpx 0;
				.item-name{
					font-size: 28rpx;
					line-height: 40rpx;
					color: #070D14;
					padding-right:200rpx
				}
				.item-code{
					font-size: 22rpx;
					color: #070D14;
					margin-top:10rpx;
				}
				.item-time{
					font-size: 22rpx;
					color: #929292;
					margin-top:10rpx;
				}
			}
			.item-state{
				background: #fff1e3;
				border-radius: 0px 18rpx 0px 18rpx;
				width: 162rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 24rpx;
				position: absolute;
				right:0;
				top:0;
				color: #FF5E01;
				font-weight: bold;
			}
			.gl-state.item-state{
				background: #FEF7E3;
				color:#FF6339
			}
			.ching.gl-state.item-state{
				background: #E3FEE3;
				color:#19C91F
			}
			.item-bottom{
				border-top: 1px solid #DEDEDE;
				padding:24rpx 0;
				@include flexbox(flex-end,center);
				
			}
		}
	}
 }
 
</style>